import React from 'react';
const LeaseOrder = () => {
    let navigate = React.$router.useNavigate();
    const statuslist = [
        {
            id: '0',
            name: '全部'
        },
        {
            id: '1',
            name: '已下单'
        },
        {
            id: '2',
            name: '已发货'
        },
        {
            id: '3',
            name: '已收货'
        },
        {
            id: '4',
            name: '已归还'
        },
        {
            id: '5',
            name: '未评价'
        },
        {
            id: '6',
            name: '已完成'
        },
    ];
    const [Business, setBusiness] = React.useState(React.$cookie.load('User') ?? {})
    const [list, setList] = React.useState([])
    const [status, setStatus] = React.useState(0)


    React.useEffect(() => {
        setList([])
        getLeaseData()
    }, [status])
    const statusChange = async (name) => {
        setStatus(name)
        setList([])
    }
    async function getLeaseData() {
        let result = await React.$api.LeaseIndex({
            busid: Business.id,
            status: status
        })
        if (result && result.code == 1) {
            setList(result.data)
        } else if (result && result.code == 0) {
            React.$vant.Toast.fail(result.msg)
        }
    }

    const Btns = (val) => {
        let item = val.item
        if (item.status == '2') {
            return (
                <React.$vant.Button size="mini" type='info' round plain onClick={() => confirm(item.id)}>
                    确认收货
                </React.$vant.Button>
            )
        } else if (item.status == '3') {
            return (
                <React.$vant.Button size="mini" type='warning' round plain onClick={() => navigate(`/lease/recovery?leaseid=${item.id}`)}>
                    归还商品
                </React.$vant.Button>
            )
        } else if (item.status == '5') {
            return (
                <React.$vant.Button size="mini" type='danger' round plain onClick={() => navigate(`/lease/comment?leaseid=${item.id}`)}>
                    订单评价
                </React.$vant.Button>
            )
        }
    }
    // 确认收货
    const confirm = async (leaseid) => {
        let result = await React.$api.LeaseConfirm({
            busid: Business.id,
            leaseid: leaseid
        })
        if (result.code == 1) {
            React.$vant.Toast.success({
                message: result.msg,
            })
            getLeaseData()
        } else {
            React.$vant.Toast.fail(result.msg)
        }
    }


    return (
        <>
            <React.$vant.NavBar
                title="我的订单"
                leftText=""
                onClickLeft={() => navigate('/business/index')}
            />
            <React.$vant.Tabs titleActiveColor="#ee0a24" color="#ee0a24" onChange={statusChange}>
                {statuslist.map(item => (
                    <React.$vant.Tabs.TabPane key={item.id} title={item.name}>
                    </React.$vant.Tabs.TabPane>
                ))}
            </React.$vant.Tabs>
            {list.map(item => {
                return (
                    <React.$vant.ProductCard
                        key={item.id}
                        price={item.price}
                        title={item.product.name}
                        thumb={item.product.thumbs_text}
                        tags={
                            <>
                                <div style={{ marginTop: '5px' }}>
                                    押金： {item.product.rent}
                                </div>
                                <div style={{ marginTop: '5px' }}>
                                    日租：{item.product.rent_price}
                                </div>
                            </>
                        }
                        num={
                            <>
                                <React.$vant.Tag plain type="danger">
                                    {item.status_text}
                                </React.$vant.Tag>
                            </>
                        }
                        footer={
                            <>
                                <React.$vant.Button size="mini" type='primary' round plain style={{ marginRight: 2, marginTop: '10px' }} 
                                onClick={() => navigate(`/lease/info?leaseid=${item.id}`)}
                                >
                                    订单详情
                                </React.$vant.Button>

                                <Btns item={item} />
                                {
                                    item.expcode &&
                                    <React.$vant.Button size="mini" type='danger' round plain
                                    onClick={() => navigate(`/lease/flow?leaseid=${item.id}`)}
                                    >
                                        物流详情
                                    </React.$vant.Button>
                                }
                            </>
                        }
                    />
                )

            })}

        </>
    )
}
export default LeaseOrder